<template>
    <div>
        <el-form
            style="margin-top:20px;"
            ref="ruleForm"
            :rules='rules'
            :label-position="labelPosition"
            label-width="120px"
            class="demo-ruleForm container"
        >
            <h3>信息单</h3>
            <el-row style="margin-top:20px;">
                <el-col :span="12">
                    <el-form-item label="部门编码：" prop='cDepCode'>
                        <el-input v-model='formData.cDepCode' placeholder='填写部门编码'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="制单人：" prop='cMaker' >
                        <el-input v-model='formData.cMaker' placeholder='制单人'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收发类别编码：" prop='cRdCode'>
                        <el-input v-model='formData.cRdCode' placeholder='收发类别编码'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="仓库编码：" prop='cWhCode'>
                        <el-input v-model='formData.cWhCode' placeholder='仓库编码'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注：" prop='cMemo'>
                        <el-input :rows="2" type="textarea" v-model='formData.cMemo' placeholder='请输入备注'></el-input>
                    </el-form-item>
                </el-col>
                <!-- TODO 苟家龙说不要了 -->
<!--                <el-col :span="12">-->
<!--                    <el-form-item label="单据编号：" prop='cCode'>-->
<!--                        <el-input v-model='formData.cCode' placeholder='单据编号'></el-input>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
            </el-row>
        </el-form>

        <div class="container" style="margin-top: 20px;">
            <h3>可推送记录</h3>
            <div style='margin-top: 20px'>
                <span class='input-box'>
                批次：<el-input clearable style='width: 200px' icon='el-icon-search' v-model='searchOption.batch' placeholder='请输入搜索内容' @clear="getData"></el-input>
            </span>
                <span class='input-box'>
                品名：<el-input clearable style='width: 200px' icon='el-icon-search' v-model='searchOption.breedName' placeholder='请输入搜索内容' @clear="getData"></el-input>
            </span>
                <span class='input-box'>
                标准：<el-select clearable style='width: 200px' icon='el-icon-search' v-model='searchOption.standard' placeholder='请选择' @clear="getData">
                    <el-option v-for='item in searchOption.option' :key='item.value' :value='item.value' :label='item.label'></el-option>
                </el-select>
            </span>
                <span class='input-box'>
                产品分类：<el-select clearable style='width: 200px' icon='el-icon-search' v-model='searchOption.materialType' placeholder='请选择' @clear="getData">
                    <el-option  value='配方颗粒' label='配方颗粒'></el-option>
                    <el-option  value='中药饮片' label='中药饮片'></el-option>
                </el-select>
            </span>
            <span>
                <el-button type='primary' icon='el-icon-search' @click='getData'>搜索</el-button>
            </span>
            <span style='margin-left: 40px'>
                <el-button type='success' icon='el-icon-plus' @click='saveStaying'>添加</el-button>
            </span>
            </div>

            <el-table
                ref='recordTable'
                :data="tableData"
                border
                style="margin-top:20px;"
                @selection-change="handleStagingSelectionChange"
            >
                <el-table-column  type="selection" width='55'></el-table-column>
                <el-table-column prop="breedName" sortable  label="品名"></el-table-column>
                <el-table-column prop="standard" sortable  label="标准">
                    <template slot-scope='{row}'>
                        {{row.standard=='1'?'国标':'省标'}}
                    </template>
                </el-table-column>
                <el-table-column prop="materialType" sortable  label="产品分类"></el-table-column>
                <el-table-column prop="batch" sortable  label="批次"></el-table-column>
                <el-table-column prop="inventoryCode" sortable  label="存货代码"></el-table-column>
                <el-table-column prop="time" sortable  label="生产时间" ></el-table-column>
                <el-table-column prop="address" sortable  label="产地" ></el-table-column>
                <el-table-column prop="prodRecordCode" sortable  label="上市备案号" ></el-table-column>
                <el-table-column prop="totalNumber" sortable  label="入库数量" ></el-table-column>
                <el-table-column prop="pushNumber" sortable  label="已推送数量" ></el-table-column>
<!--                <el-table-column prop="push" sortable  label="可推送数量">-->
<!--                    <template slot-scope='{row}'>-->
<!--                        <el-input-number v-model='row.push' :min='1' :max='row.totalNumber - row.pushNumber'></el-input-number>-->
<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>
            <el-pagination @size-change="handleSizeChange" layout="total,sizes, prev, pager, next, jumper" :page-sizes="[15, 50, 100, 300]" :page-size="pagination.pageSize" :current-page.sync="pagination.page" :total="pagination.total"  @current-change="pageChange" style="margin-top:20px"></el-pagination>
        </div>
        <div class="container" style="margin-top: 20px;">
            <h3>推送暂存</h3>
            <el-table
                ref='stayingTable'
                :data="paramsTableData"
                border
                style="margin-top:20px;"
            >
                <el-table-column prop="breedName" sortable  label="品名"></el-table-column>
                <el-table-column prop="standard" sortable  label="标准">
                    <template slot-scope='{row}'>
                        {{row.standard=='1'?'国标':'省标'}}
                    </template>
                </el-table-column>
                <el-table-column prop="batch" sortable  label="批次"></el-table-column>
                <el-table-column prop="inventoryCode" sortable  label="存货代码"></el-table-column>
                <el-table-column prop="time" sortable  label="生产时间" ></el-table-column>
                <el-table-column prop="address" sortable  label="产地" ></el-table-column>
                <el-table-column prop="prodRecordCode" sortable  label="上市备案号" ></el-table-column>
                <el-table-column prop="totalNumber" sortable  label="入库数量" ></el-table-column>
                <el-table-column prop="pushNumber" sortable  label="已推送数量" ></el-table-column>
                <el-table-column prop="push" sortable  label="可推送数量">
                    <template slot-scope='{row}'>
                        <el-input-number v-model='row.push' :min='1' :max='row.totalNumber - row.pushNumber'></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope='{row,$index}'>
                        <div style='text-align: center'>
                            <el-button type='danger' icon='el-icon-delete' @click='deleteStaying(row,$index)'>删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class='container' style="margin-top: 20px;padding: 10px;display: flex;align-items: center">
            <el-button type='primary' @click='pushData'>确定推送</el-button>
            <span style='text-align: center;margin-left: 10px'>注意：填写好信息后，勾选下方表格记录点击确定推送即可推送入库单</span>
        </div>
    </div>
</template>

<script>
import { getPushData, pushKANGSEProduct } from '@/request/api';
import Template from '@/components/page/manage/template.vue';

export default{
    components: { Template },
    data(){
        return{
            formData:{
                cDepCode:'021011',
                cMaker:"马红江",
                cMemo:'',
                cRdCode:'08',
                cWhCode:'04',
                cCode:'',
            },
            agree:false,
            rules:{
                cDepCode: [
                    { required: true, message: '部门编码不能为空', trigger: 'change' }
                ],
                cMaker: [
                    { required: true, message: '制单人不能为空', trigger: 'blur' }
                ],
                cRdCode:[
                    { required: true, message: '收发类别编码不能为空', trigger: 'blur' }
                ],
                cWhCode:[
                    { required: true, message: '仓库编码不能为空', trigger: 'blur' }
                ],
                cCode:[
                    { required: true, message: '单据编号不能为空', trigger: 'blur' }
                ]
            },
            tableData:[],
            checkedList:[],
            paramsTableData:[],
            labelPosition:'right',
            pagination:{
                pageSize:15,
                page:1,
                total:0,
            },
            searchOption:{
                batch:'',
                breedName: '',
                standard:'',
                materialType:'',
                option:[
                    {
                        value:'1',
                        label:'国标',
                    },
                    {
                        value:'2',
                        label:'省标',
                    },
                ],
            },
        }
    },
    created(){

    },
    mounted() {
        // this.getData()
    },
    methods:{
        deleteStaying(row,i){
            this.paramsTableData.splice(i,1)
            this.$message.success('删除成功')
        },
        saveStaying(){
            this.paramsTableData = this.paramsTableData.concat(...this.checkedList)
            this.$message.success('已保存到推送暂存')
            this.agree = true
            this.$refs.recordTable.clearSelection()
            console.log(this.paramsTableData,'***');
        },
        handleStagingSelectionChange(dataList){
            this.checkedList = dataList
        },
        async pushData(){
            if(this.paramsTableData.length){
                let params = {
                    ...this.formData,
                    particlePackingList:this.paramsTableData
                }
                try {
                    const res = await pushKANGSEProduct(JSON.stringify(params))
                    if(res.code == 200){
                        this.$message.success('推送成功')
                        this.paramsTableData = []
                        this.getData()
                        this.$router.go(-1)
                    }
                }catch (e) {
                    this.$message.error(e.code)

                }
            }else{
                this.$message.warning('请选择需要推送的入库记录')
            }
        },
        handleSizeChange(v){
            this.pagination.pageSize = v
            this.getData()
        },
        async getData(){
            let params = {
                page:this.pagination.page,
                pageSize:this.pagination.pageSize,
                batch:this.searchOption.batch,
                breedName:this.searchOption.breedName,
                standard:this.searchOption.standard,
                materialType:this.searchOption.materialType
            }
            const data = await getPushData(params)
            this.tableData = data.data.content
            this.pagination.total = data.data.totalElements
            this.agree = false

        },
        pageChange(page){
            if(this.agree){
                this.pagination.page = page
                this.getData()
            }else{
                if(this.checkedList.length){
                    this.$confirm("注意翻页需要保存推送暂存",'提示',{
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(res=>{
                        console.log(res);
                        if(res == 'confirm'){
                            this.saveStaying()
                            this.pagination.page = page
                            this.getData()
                            // this.agree = true
                        }
                    }).catch(err=>{
                        //handle err
                    })
                }else{
                    this.pagination.page = page
                    this.getData()
                }
            }
        },
        handleExport(){
            window.location.href = "http://" + window.location.host + "/supply/export/" + this.inputs.id;
        }
    }
}
</script>

<style>
.input-box{
    margin-right: 20px;
}
.el-pagination{
    text-align: center;
}
/deep/.el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
}
.customWidth{
    width:30%;
}

</style>
